<!--
 * @Description: 详情弹窗
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2021-12-15 10:37:22
 * @LastEditTime: 2025-09-16 18:27:42
-->
<template>
  <el-dialog
    class="fy-detail-dialog"
    v-model="showDialog"
    append-to-body
    :title="title"
    @open="$emit('open', $event)"
    width="30%"
    draggable
  >
    <el-descriptions :column="3" border v-loading="loading">
      <el-descriptions-item
        v-for="item in options"
        :key="item.key"
        :label="item.label"
      >
        <slot
          v-if="item.slot"
          :name="item.slot"
          v-bind="{ val: params[item.key], options: item }"
        />
        <template v-else>
          {{
            item.formatter ? item.formatter(params) : params[item.key] || "暂无"
          }}
        </template>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span class="dialog-footer">
        <el-button plain @click="showDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { PropType } from "vue";
import { IDetailOption } from "../types";

// 组件名称（必要）
defineOptions({ name: "FyDetailDialog" });

// model方法改为defineModel语法糖
const showDialog = defineModel<boolean>({ default: false });

defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  /**
   * 弹窗标题
   */
  title: {
    type: String,
    default: "详情",
  },
  /**
   * 默认距顶部距离
   */
  top: {
    type: [String, Number],
    default: "20%",
  },
  /**
   * 详情配置选项
   */
  options: {
    type: Array as PropType<IDetailOption[]>,
    required: true,
    default: () => [],
  },
  /**
   * 数据
   */
  params: {
    type: Object as PropType<Record<string, unknown>>,
    required: true,
    default: () => ({}),
  },
});

// emit
defineEmits(["open"]);
</script>

<style lang="scss">
@media all and (min-width: 999px) {
  .fy-detail-dialog.el-dialog {
    width: 978px;
  }
}

@media all and (min-width: 685px) and (max-width: 998px) {
  .fy-detail-dialog.el-dialog {
    width: 664px;
  }
}

@media all and (min-width: 376px) and (max-width: 684px) {
  .fy-detail-dialog.el-dialog {
    width: 374px;

    .el-dialog__body {
      text-align: center;
    }
  }
}

@media all and (max-width: 375px) {
  .fy-detail-dialog.el-dialog {
    width: calc(100% - 20px);
    min-width: auto;
  }
}
</style>
